import {
 Button, Form, Input, notification, Tooltip,
} from 'antd'
import React, { PureComponent } from 'react'
import { testHBaseConnection } from '../api'

const { Item } = Form

export default class DataSource extends PureComponent {
  constructor(props) {
    super(props)
    this.state = {
    }
  }

  componentDidMount() {
  }

  testStorageFn = () => {
    const { form, id, clearTable } = this.props
    form.current.validateFields().then(values => {
      this.setState({
        loading: true,
      })
      testHBaseConnection({
        dsLink: values.dsLink,
        dsType: values.dsType,
        id,
      }).then((res) => {
        if (res.status === 200) {
          clearTable()
          notification.success({
            message: '连接测试',
            description: res.msg,
          })
          this.setState({
            loading: false,
          })
        } else {
          clearTable()
          notification.error({
            message: '连接测试',
            description: res.msg,
          })
          this.setState({
            loading: false,
          })
        }
      })
    })
  }

  render() {
    const { isCheck } = this.props
    return (
      <div>
        {/* <Item
          label="数据源名称"
          name="dsName"
          rules={[{ required: true, message: '请输入数据源名称' }]}
        >
          <Input
            disabled={isCheck}
            placeholder="请输入数据源名称"
          />
        </Item>
        <Item
          label="数据源描述"
          name="dsDesc"
          rules={[{ required: false }]}
        >
          <Input
            disabled={isCheck}
            placeholder="请输入数据源描述"
          />
        </Item> */}
        <Item
          label={<span>链接信息 <Tooltip placement="right" title={<p>HBase集群提供给客户端连接的配置信息，您可以将hbase-site.xml转换为JSON格式填写到此处作为数据源配置。同时可以补充更多HBase client的配置，如：设置scan的cache、batch来优化与服务器的交互。</p>}><i className="iconfont icon-yiwentishi" /></Tooltip></span>}
          name="dsLink"
          rules={[{ required: true, message: '请输入链接信息' }]}
        >
          <Input.TextArea
            rows={5}
            placeholder={`{
  "hbase.rootdir":"hdfs://localhost:9000/hbase",
  "hbase.zookeeper.quorum":"localhost"
}`}
          />
        </Item>
        <Item wrapperCol={{ offset: 6, span: 18 }}>
          <Button onClick={this.testStorageFn} loading={this.state.loading} type="primary">连接测试</Button>
        </Item>
      </div>
    )
  }
}
